<template>
    <div class="sl-wrapper">
      <v-title ref="title" class="v-title"><span slot="title-name">数理吉凶</span></v-title>
      <div class="main-wrapper">
        <div class="two-row-wrapper mu-wrapper">
          <div class="top-ji">
            <div class="left-label inline tc">吉</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in mu_ji" class="inline tc" @click="showDetail(item,'吉')">{{item}}</li>
              </ul>
            </div>
          </div>
          <div class="bottom-xiong">
            <div class="left-label inline tc">凶</div>
            <div class="right-content inline">
                <ul>
                  <li v-for="item in mu_xiong" class="inline tc" @click="showDetail(item,'凶')">{{item}}</li>
                </ul>
            </div>
          </div>
        </div>
        <div class="two-row-wrapper huo-wrapper">
          <div class="top-ji">
            <div class="left-label inline tc">吉</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in huo_ji" class="inline tc" @click="showDetail(item,'吉')">{{item}}</li>
              </ul>
            </div>
          </div>
          <div class="bottom-xiong">
            <div class="left-label inline tc">凶</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in huo_xiong" class="inline tc" @click="showDetail(item,'凶')">{{item}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="two-row-wrapper tu-wrapper">
          <div class="top-ji">
            <div class="left-label inline tc">吉</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in tu_ji" class="inline tc" @click="showDetail(item,'吉')">{{item}}</li>
              </ul>
            </div>
          </div>
          <div class="bottom-xiong">
            <div class="left-label inline tc">凶</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in tu_xiong" class="inline tc" @click="showDetail(item,'凶')">{{item}}</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="three-row-wrapper jin-wrapper">
          <div class="top-ji">
            <div class="left-label inline tc">吉</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in jin_ji" class="inline tc" @click="showDetail(item,'吉')">{{item}}</li>
              </ul>
            </div>
          </div>
          <div class="middle-xiong">
            <div class="left-label inline tc">凶</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in jin_xiong" class="inline tc" @click="showDetail(item,'凶')">{{item}}</li>
              </ul>
            </div>
          </div>
          <div class="bottom-half">
            <div class="left-label inline tc">半吉半凶</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in jin_half" class="inline tc" @click="showDetail(item,'半吉半凶')">{{item}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="three-row-wrapper shui-wrapper">
          <div class="top-ji">
            <div class="left-label inline tc">吉</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in shui_ji" class="inline tc" @click="showDetail(item,'吉')">{{item}}</li>
              </ul>
            </div>
          </div>
          <div class="middle-xiong">
            <div class="left-label inline tc">凶</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in shui_xiong" class="inline tc" @click="showDetail(item,'凶')">{{item}}</li>
              </ul>
            </div>
          </div>
          <div class="bottom-half">
            <div class="left-label inline tc">半吉半凶</div>
            <div class="right-content inline">
              <ul>
                <li v-for="item in shui_half" class="inline tc" @click="showDetail(item,'半吉半凶')">{{item}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 数字对应的 detail -->
      <transition name="slide">
        <div class="detail-wrapper pf" v-show="isShow">
          <div class="title-wrapper">
            <div class="title tc" ref="title" @click="isShow = false">
              数字解释
              <i class="pa back-icon"></i>
            </div>
          </div>
          <div class="num-detail">
            <p class="tc num-detail-title" :class="{ji:type === '吉',xiong:type === '凶',half:type === '半吉半凶'}">
              <span class="selectedNum">{{selectedNum}}</span>
              <span class="type">{{type}}</span>
            </p>
            <div class="desc" v-html="desc">

            </div>
          </div>
        </div>
      </transition>
    </div>
</template>

<script>
    import Title from '@/components/title/Title'
    import NUM from '@/common/js/num'
    import JX from '@/common/js/jx'

    export default {
        name: "Sl",
        data() {
            return {
              JX:JX,
              NUM:NUM,
              jin_ji:[],
              jin_xiong:[],
              jin_half:[],
              mu_ji:[],
              mu_xiong:[],
              shui_ji:[],
              shui_xiong:[],
              shui_half:[],
              huo_ji:[],
              huo_xiong:[],
              tu_ji:[],
              tu_xiong:[],
              isShow:false,
              selectedNum:-1,
              type:"",
              desc:""
            }
        },
        components:{
          "v-title":Title
        },
        methods: {
          getNum(wx,type){
            let arr = [];
            for(let k in this.NUM[wx]){
              if(this.NUM[wx][k] === type){
                arr.push(k);
              }
            }
            return arr;
          },
          showDetail(num,type){
            this.selectedNum = num;
            this.type = type;
            this.desc = this.JX[num].detail.replace(/\n+/g,"<br>");
            this.isShow = true;
          }
        },
        created(){
          this.jin_ji = this.getNum("金","吉");
          this.jin_xiong = this.getNum("金","凶");
          this.jin_half = this.getNum("金","半吉半凶");
          this.mu_ji = this.getNum("木","吉");
          this.mu_xiong = this.getNum("木","凶");
          this.shui_ji = this.getNum("水","吉");
          this.shui_xiong = this.getNum("水","凶");
          this.shui_half = this.getNum("水","半吉半凶");
          this.huo_ji = this.getNum("火","吉");
          this.huo_xiong = this.getNum("火","凶");
          this.tu_ji = this.getNum("土","吉");
          this.tu_xiong = this.getNum("土","凶");
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .sl-wrapper
    padding-top 100px
    .detail-wrapper
      top 0
      right 0
      width 100%
      height 100%
      background url("../wg/wu-bg.png") no-repeat center center
      background-size cover
      z-index 10
      .title-wrapper
        height 100px
        .title
          height 100px
          line-height 100px
          font-size 36px
          background #eeeeee
          .back-icon
            top 0
            left 0
            width 80px
            height 100px
            background url("../title/back-icon.png") no-repeat center center
            background-size 20px 36px
      .num-detail
        width 644px
        margin 30px auto  0
        padding 50px 28px 80px 28px
        background #ffffff
        .num-detail-title
          margin-bottom 40px
          &.ji
            color #3ed298
          &.xiong
            color #f85149
          &.half
            color #5b7ca5
          .selectedNum
            font-size 60px
          .type
            font-size 32px
        .desc
          font-size 24px
          line-height 38px
    .slide-enter-active, .slide-leave-active
        transition: right .3s
    .slide-enter, .slide-leave-to
        right: -100%
    .main-wrapper
      padding 30px
      .two-row-wrapper
        height 240px
        padding-left 140px
        margin-bottom 30px
        &.mu-wrapper
          background url("./mu-bg.png") no-repeat center center
          background-size cover
        &.tu-wrapper
          background url("./tu-bg.png") no-repeat center center
          background-size cover
        &.huo-wrapper
          background url("./huo-bg.png") no-repeat center center
          background-size cover
        .top-ji
          font-size 0
          .left-label
            width 90px
            height 120px
            color #3ed298
            font-size 32px
            line-height 120px
          .right-content
            width 460px
            li
              font-size 28px
              width 60px
              height 120px
              line-height 120px
              color #3ed298
        .bottom-xiong
          font-size 0
          .left-label
            width 90px
            height 120px
            color #f85149
            font-size 32px
            line-height 120px
          .right-content
            width 460px
            padding-top 10px
            li
              font-size 28px
              width 60px
              height 50px
              line-height 50px
              color #f85149
      .three-row-wrapper
        height 320px
        padding-left 140px
        margin-bottom 30px
        .top-ji
          height 100px
          font-size 0
          .left-label
            width 90px
            height 100px
            color #3ed298
            font-size 32px
            line-height 100px
          .right-content
            width 460px
            li
              font-size 28px
              width 60px
              height 100px
              line-height 100px
              color #3ed298
        .middle-xiong
          height 120px
          font-size 0
          .left-label
            width 90px
            height 120px
            color #f85149
            font-size 32px
            line-height 120px
          .right-content
            width 460px
            padding-top 10px
            li
              font-size 28px
              width 60px
              height 50px
              line-height 50px
              color #f85149
        .bottom-half
          height 100px
          font-size 0
          .left-label
            width 180px
            height 100px
            color #5b7ca5
            font-size 32px
            line-height 100px
          .right-content
            width 370px
            li
              font-size 28px
              width 60px
              height 100px
              line-height 100px
              color #5b7ca5
        &.jin-wrapper
          background url("./jin-bg.png") no-repeat center center
          background-size cover
        &.shui-wrapper
          background url("./shui-bg.png") no-repeat center center
          background-size cover
</style>

